<template>
  <div class="put-article">
    <van-sticky>
      <van-nav-bar
        title="文章编辑"
        left-arrow
        @click-left="$router.go(-1)"
        @click-right="pubArticle"
      >
        <template #right>
          <div
            class="rel"
            :class="{ 'rel-highlight': isHighLight }"
            :aria-disabled="isHighLight"
          >
            发布
          </div>
        </template>
      </van-nav-bar>
    </van-sticky>

    <van-form>
      <van-field
        v-model="article.title"
        name="标题"
        label="标题"
        placeholder="标题"
        :rules="[{ required: true, message: '请填写标题' }]"
      />
      <van-field
        readonly
        clickable
        is-link
        label="类型"
        placeholder="点击选择文章类型"
        v-model="type"
        @click="showPicker = true"
      />
      <van-popup
        v-model="showPicker"
        round
        position="bottom"
        @open="initPicker"
      >
        <van-picker :columns="types" @change="onChange" :default-index="1" />
      </van-popup>

      <van-divider>文章内容</van-divider>
      <div class="text">
        <MyEditor
          :content="article.content.content"
          :height="400"
          @change="updateContent"
        ></MyEditor>
      </div>
    </van-form>
  </div>
</template>

<script>
import VueHtml5Editor from "vue-html5-editor";
import options from "@/utils/editor.js";
const MyEditor = new VueHtml5Editor(options);
import { pubArticleAPI, getCategoryAPI } from "@/api/articleApi";
import { mapState } from "vuex";
export default {
  components: {
    MyEditor,
  },
  data() {
    return {
      article: {
        title: "",
        content: { content: "" },
        category_id: "",
        images: [],
      },
      showPicker: false,
      types: [],
      type: "",
      category: [],
    };
  },
  computed: {
    ...mapState("user", ["profile"]),
    ...mapState("article", ["images"]),
    isHighLight() {
      return Object.values(this.article).every((item) => item);
    },
  },
  methods: {
    updateContent(value) {
      this.article.content.content = value;
    },
    async pubArticle() {
      if (!this.isHighLight) return;
      this.article.author_id = this.profile.id;
      this.article.images = this.images;
      const { data: res } = await pubArticleAPI(this.article);
      if (res.message == "OK") {
        this.article = {
          title: "",
          content: { content: "" },
          category_id: "",
          images: [],
        };
        this.$notify({
          type: "success",
          message: "文章发布成功",
          duration: 1000,
        });
        this.$router.replace("/community");
      }
    },
    initPicker() {
      if (!this.article.category_id) {
        this.article.category_id = this.category.find(
          (item) => item.name == this.types[1]
        ).id;
        this.type = this.types[1];
      }
    },
    onChange(picker, value, index) {
      this.article.category_id = this.category.find(
        (item) => item.name == value
      ).id;
      this.type = value;
    },
    async initCategory() {
      const { data: res } = await getCategoryAPI();
      if (res.message == "OK") {
        this.category = res.data;
        this.category.forEach((item) => this.types.push(item.name));
      }
    },
  },
  created() {
    this.initCategory();
  },
};
</script>

<style lang="less" scoped>
.pub-article {
  height: 100%;
  background-color: #e7e7e7;
}

.rel {
  width: 45px;
  height: 25px;
  background-color: #e7e7e7;
  border-radius: 8px;
  font-size: 14px;
  text-align: center;
  line-height: 25px;
  color: #919191;
}

.rel-highlight {
  background-color: #ea7a99;
  color: #fff;
}

.text {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 8px;
}
</style>
